import { reactive, ref } from "vue"

// 安装 npm install @vitejs/plugin-vue-jsx -D
// 配置 在 vite.config.ts 中导入并以函数形式调用后挂载

const flag = ref<boolean>(false)
const arr = reactive<number[]>([1, 2, 3, 4, 5])
const click = (val: string) => {
  flag.value = !flag.value
  console.log(val)
}

interface Props {
  name: string
}
// 定义渲染器函数
// 渲染器函数第一个参数为 props 对象，接受父组件传递的数据
// 第二个参数为一对象，对象上具有 emit 方法，用于派发自定义事件，向父组件传递数据
const renderDom = (props: Props, obj: any) => {
  // 渲染器函数的返回值为一 DOM 结构
  // DOM 结构用 () 包裹
  return (
    // DOM 结构作为返回值必须为唯一的标签元素
    // 故需要在外部包裹一个父元素标签
    <div>
      {/* 使用变量时采用 {} 包裹 */}
      {/* 支持 v-show  */}
      <div v-show={flag.value}>Hellow TSX</div>
      {/* 不支持 v-if 使用 {} 包裹的 js 条件判断表达式实现 v-if */}
      {flag.value ? <div>a</div> : <div>b</div>}
      {/* 不支持 v-on / @ 采用 驼峰形式的 on + 事件名 进行事件绑定 */}
      {/* 传递给事件处理函数的参数，使用 fun.bind(this, val) 形式 */}
      <button onClick={click.bind(this, props.name)}>click</button>
      {/* 不支持 v-bind / : 属性绑定，直接变量赋值给属性即可 */}
      <p a={flag.value}>自定义属性 a 且用变量 flag 值绑定</p>
      {/* 不支持 v-for 循环渲染，直接使用遍历数组即可 */}
      {arr.map(i => { return <div>{i}</div> })}
      {/* 派发自定义事件，直接事件绑定回调进行派发，或将 obj 以参数形式传递给事件处理函数，在其中派发 */}
      <button onClick={() => { obj.emit('on-click', flag) }}>派发自定义事件</button>
    </div>
  )
}

// 导出渲染器函数
export default renderDom